<template>
  <div class="additionComb">
    <div class="additionItem">
      <div class="itemTitle">检查项目</div>
      <div style="margin-bottom: 15px;">
        <el-input placeholder="请输入项目名称" v-model="combInput" clearable>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
      <el-table :data="basecombList" @selection-change="handleLeftSelection" max-height="300" style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="检查项目" align="center" prop="combname" />
        <el-table-column label="适用性别" align="center" prop="applysex">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.applysex"/>
          </template>
        </el-table-column>
        <el-table-column label="原价" align="center" prop="combprice" />
      </el-table>
    </div>
    <div class="additionBtn">
      <div>
        <div style="margin-bottom: 30px"><el-button type="primary" @click="add">增加</el-button></div>
        <div><el-button type="primary" @click="remove">删除</el-button></div>
      </div>
    </div>
    <div class="additionItem">
      <div class="itemTitle">已选检查项</div>
      <el-table :data="choosedbasecombList" @selection-change="handleRightSelection" max-height="300" style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="检查项目" align="center" prop="combname" />
        <el-table-column label="适用性别" align="center" prop="applysex">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.applysex"/>
          </template>
        </el-table-column>
        <el-table-column label="原价" align="center" prop="combprice" />
      </el-table>
    </div>
  </div>
</template>

<script>
import { listBasecomb } from '@/api/base/basecomb'

export default {
  name: 'TableTransfer',
  dicts: [ 'sys_user_sex'],
  props: {
    idField: { type: String, default: 'id' }, //唯一标识,
    list: { type: Array, default: ()=> [] },
  },
  watch: {
    list: {
      handler(val) {
        this.basecombList = val.concat();
        this.completeBasecombList = val.concat()
      },
      immediate: true
    }
  },
  data() {
    return {
      //搜索内容
      combInput: '',
      //套餐组合项目
      basecombList: [],
      completeBasecombList: [],
      //已选择的套餐组合项目
      choosedbasecombList: [],
      leftSelection: [],
      rightSelection: []
    }
  },
  created() {
  },
  methods: {
    search() {
      let list = this.completeBasecombList.concat()
      this.removeAll(list, this.choosedbasecombList)
      if(this.combInput) {
        this.basecombList = list.filter(item => {
          return item.combname.indexOf(this.combInput) > -1
        })
      } else {
        this.basecombList = list
      }
    },
    removeAll(arr, removedArr) {
      removedArr.forEach(item=>{
        const index = arr.findIndex(value => {
          return value[this.idField] == item[this.idField]
        })
        if(index >= 0) {
          arr.splice(index, 1)
        }
      })
    },
    add() {
      //删除左边元素
      this.removeAll(this.basecombList, this.leftSelection)
      //添加到右边
      this.choosedbasecombList.push(...this.leftSelection)
    },
    remove() {
      //删除右边元素
      this.removeAll(this.choosedbasecombList, this.rightSelection)
      //添加到左边
      this.basecombList.push(...this.rightSelection)
    },
    handleLeftSelection(val){
      this.leftSelection = val
    },
    handleRightSelection(val) {
      this.rightSelection = val
    },
    getChoosedbasecombList() {
      return this.choosedbasecombList
    },
    setChoosedbasecombList(val) {
      this.$nextTick(()=>{
        this.leftSelection = []
        this.rightSelection = []
        this.combInput = ''
        this.choosedbasecombList = val
        this.search()
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep table{
  width: 100% !important;
}
.additionComb{
  display: flex;
  justify-content: space-between;
  .additionItem{
    width: 100%;
    overflow: hidden;
  }
  .additionBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
  }
  .itemTitle{
    font-size: 18px;
    margin-bottom: 20px;
  }
}
</style>
